<template>
  <div>
    <h4>方式1:跳转登录</h4>
    <button @click="toLogin">微信登录</button>
    <h4>方式2:内嵌登录</h4>
    <div id="qrWeChat" ref="qrWeCharRef" class="qr-we-chat"></div>
  </div>
</template>

<script setup lang="ts">
// 微信公众平台测试账号系统: https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index

import { onMounted, ref } from "vue";
import config from "../../envConfig.ts";

const toLogin = () => {
  window.location.href =
    config.VITE_WX_LOGIN +
    `appid=${config.VITE_WECHAT_APP_ID}&redirect_uri=${encodeURIComponent(
      config.VITE_BASE_API!
    )}&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect`;
};
const qrWeCharRef = ref();
const generateCode = () => {
  new window.WxLogin({
    id: "qrWeChat",
    appid: config.VITE_WECHAT_APP_ID,
    scope: "snsapi_login",
    style: "height: 240px; width: 240px; margin-top: 0;",
    redirect_uri: encodeURIComponent(config.VITE_BASE_API!),
    href: "https://oet74iakm.qnssl.com/weixinstyle.css",
    state: encodeURIComponent(config.VITE_BASE_API!),
  });
};

onMounted(() => {
  console.log("配置信息", config, qrWeCharRef.value);

  // const code = new URL(window.location.href).searchParams.get('code')

  generateCode();
});
</script>

<style scoped lang="less">
.qr-we-chat {
  width: 240px;
  height: 272px;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  justify-content: center;
}
</style>
